import React, { useEffect, useState,useRef } from 'react';
import { Button } from 'dw-mx';
import { DateCell, DateToMoment, EditcellTable, SelectCell } from 'dw-mx-table';
import Lov from '@/pages/table/Lov';
import { Code } from 'dw-mx-extend';
export default function TableDemo() {
    const dataSource = [
        {
            key: '0',
            name: 'Edward King 0',
            age: 32,
            address: 'London, Park Lane no. 0',
            date:'2020/02/09',
            rwzt:'2',
            ksmc:'search',
        },
        {
            key: '1',
            name: 'Edward King 1',
            age: 32,
            address: 'London, Park Lane no. 1',
            date:'2020/08/09',
            rwzt:'2',
            ksmc:'search',
        },
    ]
    const columns = [
        {
            title: 'name',
            dataIndex: 'name',
            width: 100,
            editable: true,
            componentType:{
                type:"Input",
                props:{}
            }
        },
        {
            title: 'age',
            dataIndex: 'age',
            width: 100,
            editable: true,
            componentType: {
                type:'InputNumber',
                props: {
                    min:1,
                    max:100,
                }
            }
        },
        {
            title: 'address',
            dataIndex: 'address',
            width: 200,
            editable: true,
            componentType:{
                type:'Input.TextArea',
                props: {
                    autoSize:true
                }
            }
        },
        {
            title: 'date',
            dataIndex: 'date',
            width: 150,
            editable: true,
            componentType:{
                type:'DatePicker',
                props: {
                    format:'YYYY/MM/DD'
                }
            },
            render: (value, record ,index) => {
                return <DateCell value={value} mask={'YYYY/MM/DD'}/>;
            }


        },
        {
            title: '任务状态',
            dataIndex: 'rwzt',
            width: 150,
            editable: true,
            componentType:{
                type:'Select',
                props: {
                    options:Code.JSONCODE([ { value: '1', content: '已完成' }, { value: '2', content: '未完成' }, { value: '3', content: '已作废' } ]) ,
                    allowClear:true,
                }
            },
            render:(value, record, index) => {
                return <SelectCell value={value} align={"left"} options={Code.JSONCODE([ { value: '1', content: '已完成' }, { value: '2', content: '未完成' }, { value: '3', content: '已作废' } ])}/>;
            }
        },
        {
            title: '搜索',
            dataIndex: 'ksmc',
            width:100,
            editable: true,
            componentType:{
                type:'Search',
                props: {
                    modalprops:{
                        searchmodal:Lov,
                        props:{
                        }
                    },
                    searchprops:{}
                }
            }
        },
    ];
    const [data,setData] = useState(DateToMoment(dataSource,['date'],'YYYY/MM/DD'));
    const [selectedRowKeys,setSelectedRowKeys] = useState([]);
    const countRef = useRef();
    countRef.current = 2;
    const pageConfig = {
         pageSize:5
     };
    useEffect(() => {
        setData(DateToMoment(data,['date'],'YYYY/MM/DD'))
    }, [data]);
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys)
        }
    }
    const getTabledata = (tabledata) => {
        setData(tabledata)
    }
    //删除
    const handleDelete = () => {
        const tabledata = data;
        const result = tabledata.filter(item => {
            if(selectedRowKeys.indexOf(item.key) == -1){
                return item
            }
        });
        setSelectedRowKeys([]);
        setData(result)
    };
    //新增
    const handleAdd = () => {
        const newData = {
            key: countRef.current.toString(),
            name: `Edward King ${countRef.current}`,
            age: 32,
            address: `London, Park Lane no. ${countRef.current}`,
            date:new Date(),
            rwzt:'1',
            ksmc:'search',
        };
        const newsource = [...data, newData];
        countRef.current = countRef.current + 1;
        setData(newsource)
    };
    const getData = (data) => {
        if(data.length % pageConfig.pageSize != 0){
            const tempData = [];
            const tempRowNum = data.length % pageConfig.pageSize;
            for(let i = 0;i<pageConfig.pageSize-tempRowNum;i++){
                tempData.push({key:countRef.current.toString()});
                countRef.current = countRef.current + 1;
            }
            return [...data,...tempData];
        }else{
            return data;
        }
    };
    console.log(data);
    return (
        <div>
            <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
                Add a row
            </Button>
            <Button onClick={handleDelete} type="primary" style={{ marginBottom: 16 }}>
                删除
            </Button>
            <EditcellTable
                pagination={pageConfig}
                rowSelection={{ ...rowSelection, }}
                dataSource={getData(data)}
                columns={columns}
                getChildValues={getTabledata}
            >
            </EditcellTable>
        </div>
    );
}